<html> 
    <head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<link type="text/css" rel="stylesheet" href="gmap.css" />
		<style type="text/css" media="screen">
		#map-container { height:800px;overflow:scroll; }
		.circle_class{
			border-radius: 50%;
		}
		.rect_class{
			border-radius: 0%;
		}
		body { margin:0px;padding:0px }
		</style>		

        <script>
        function applyDarkTheme(){
            document.documentElement.style.background = 'black';
            document.body.style.background = 'black';
        }
        
        function applyLightTheme(){
            document.documentElement.style.background = '';
            document.body.style.background = '';
        }
        </script>


        <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{GOOGLE_API_KEY}}&callback=initMap"></script>
        <script type="text/javascript">
		{{load_geoxml3}}
		</script>
		<script type="text/javascript">
		{{load_geoxml3_ext}}
		</script>
		<script type="text/javascript">
		{{load_keydragzoom}}
		</script>
		<script type="text/javascript">
		{{load_extensions}}
		</script>
    <script>
    var mpos=-1;
    var mapImpl = "GOOGLE";
    var map;
	var gxml;
	var proxy = "/cgi-bin/proxy.php?"

	{{applyTheme}}
	
    function initialize() {
        var kmlUrl = '';
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.HYBRID,
			zoom: 3,
			center: new google.maps.LatLng(0,0)
			}
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	 	gxml = new GeoXmlIped("gxml", map, kmlUrl, {
			sidebarid:"the_side_bar",
			publishdirectory:"",
			messagestyle:{opacity:1.0 ,backgroundColor:"#a0c0fE", borderWidth:"1px"},
			iwwidth:280
		});

        gxml.setIcon("{{icone_base64}}"); 
        gxml.setHighlightedIcon("{{icone_selecionado_base64}}"); 
        gxml.setHighlightedCheckedIcon("{{icone_selecionado_m_base64}}");
        gxml.setCheckedIcon("{{icone_m_base64}}");

		map.enableKeyDragSelect();

		document.getElementById('ordem_descr').innerHTML = gxml.tourOrder;
		document.getElementById('resultsinfo').innerHTML = 'Mapped Items:'+gxml.overlayman.markers.length; 

	    map.addListener('dragend_rect', function(rect, proj) {
	    	var ms = gxml.selecionaRetangulo(rect, proj);
	    	window.app.selectMarkerBF(ms);
    	  });
	    map.addListener('dragend_circle', function(pInicio, pFim, proj) {
	    	var ms = gxml.selecionaCirculo(pInicio, pFim, proj);
	    	window.app.selectMarkerBF(ms);
    	  });
    }

    
    function updateLeadMarker(marker){
		var i=0;
       	for (var ind in gxml.overlayman.markers){
       		if(gxml.overlayman.markers[ind].extendedData.id==marker){
    			mpos=i;
       			break;
       		}
       		i++;
       	}
       	return mpos;
    }

    function moveToMarkerPos(pos){    
    	if(pos<0){
    	   if(mpos==0){
	           alert('The navigation already is on the first item.');
	           return false;
    	   }else{
    	       pos = 0;
    	   }
    	}
    	if(pos>=gxml.overlayman.markers.length){
    		alert('The navigation already is on the last item.')
    		return false;
    	}
		mpos=pos;
    	google.maps.event.trigger(gxml.overlayman.markers[mpos],"click");
    	map.setCenter(gxml.overlayman.markers[mpos].getPosition());
    	gxml.navigationPos = mpos;
    	return false;
    }
    
    function moveToLastMarker(){
    	moveToMarkerPos(gxml.overlayman.markers.length-1);
    }    
    
    function zoomOut(){
    	var markers = gxml.overlayman.markers;
        alert(markers.length);
    	var bounds = new google.maps.LatLngBounds();
    	for (var i = 0; i < markers.length; i++) {
    	 bounds.extend(markers[i].getPosition());
    	}

    	map.fitBounds(bounds);
    }

	</script>
    </head>
    <body onload="initialize();">
       <table style="height:100%;width:100%"><tr><td width="*">
  <div id="map_canvas" style="width:100%;height:100%;"></div></td>
    <td width="50px" id="td_barra">
    {{toolbar}}
   </td></tr>
</table>
    </body>
    <div id="the_side_bar" style="position:fixed;float:right;height:100%;width:100%; visibility:hidden"></div>    
</html>